<template>
  <div>
    <div class="top">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/aaaaa.png"
        class="topImg"
        mode="aspectFill"
      />
      <div class="content">
        <img :src="account.logo" class="logoImg" />
        <div>
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/distribution_identity.png"
            class="tagImg"
            mode="aspectFill"
          />
          <span>{{account.shopKind === 'SUPPLIER' ? '供应商' : '分销商'}}</span>
        </div>
        <span class="shopName">{{account.shopName}}</span>
      </div>
    </div>
    <div
      class="list"
      v-for="(item,index) in list"
      :key="index"
      @click="linkClick(item.link)"
    >
      <div class="left">
        <img :src="item.icon" mode="aspectFill" />
        <span>{{item.label}}</span>
      </div>
      <img class="right" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
    </div>
  </div>
</template>

<script>
import {} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [
        {
          label: '我的分销商品',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/distribution_fxsp.png',
          link: 'my-dis-shop'
        },
        {
          label: '分销商品管理',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/distribution_fxspgl.png',
          link: 'dis-shop-manage'
        }
      ],
      account: {}
    }
  },
  computed: {
    // account () {
    //   // return this.$store.state.account
    //   console.log(1, this.$store.state.account)
    //   console.log(2, this.$cookie.get('account'))
    //   return this.$cookie.get('account')
    // }
  },
  watch: {},
  created () {},
  mounted () {
    this.init()
  },
  onShow () {},
  methods: {
    linkClick (link) {
      if (link === 'my-dis-shop') {
        if (this.account.shopKind !== 'SUPPLIER') {
          this.$toast('请先成功供应商')
        } else {
          this.$router.push(`/pages/shop-management/dis/${link}/main`)
        }
      } else {
        this.$router.push(`/pages/shop-management/dis/${link}/main`)
      }
    },
    init () {
      const vm = this
      vm.account = vm.$cookie.get('account')
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.top {
  width: 100%;
  height: 220px;
  position: relative;
  margin-bottom: 20px;
  .topImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logoImg {
      width: 70px;
      height: 70px;
      border-radius: 50px;
    }
    div {
      height: 20px;
      margin: 5px 0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .tagImg {
        width: 70px;
        height: 20px;
        position: absolute;
        z-index: -1;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      span {
        font-size: 12px;
        color: #fff;
      }
    }
    .shopName {
      font-size: 16px;
      color: #fff;
    }
  }
}
.list {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  .left {
    margin-left: 15px;
    width: 35%;
    display: flex;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-size: 13px;
      color: #000;
    }
  }
  .right {
    width: 7px;
    height: 15px;
    margin-right: 15px;
  }
}
</style>
